<template>
<div class="mui">
  <div class="top">
    <img :src=bgimg alt="" class="bg">
      <div class="title">
        <div class="t">
             <span class="s1" @click="backs">
          <img src="../img/bak.png" alt="">
        </span >
          <span class="s2">
           <img src="../img/sea.png" alt="">
        </span>
          <span class="s3">
           <img src="../img/more.png" alt="">
        </span>
        </div>

      </div>
    <div class="bottom">
      <ul>
        <li>
          <van-icon name="chat-o" class="icc" />
          <br>
          <span>
            15.5万
          </span>
        </li>
        <li>
          <van-icon name="expand-o" class="icc"/>
          <br>
          <span>
           6902
          </span>
        </li>
        <li>
          <van-icon name="down"  class="icc"/>
          <br>
          <span>
           下载
          </span>
        </li>
        <li>
          <van-icon name="certificate"  class="icc"/>
          <br>
          <span>
           多选
          </span>
        </li>
      </ul>
    </div>
  </div>
  <div class="playmusic">
    <div class="playtitle">
      <div class="ss">
          <span class="s1">
        <img src="../img/playm.png" alt="">
      </span>
        <span class="s2">播放全部</span>
        <span class="s3">(共100首)</span>
        <span class="s4">
        +  收藏（237.2万）
      </span>
      </div>

      <ul>
        <li v-for="(key,item) in yinyue" @click="pla(item)" ref="list">
          <span class="sleft">
            <span class="left1">{{num[item]}}</span>
            <br>
            <span class="left2">

              <span class="left2-1"><img src="../img/ttop.png" alt="">503%</span>
            </span>
          </span>
          <span class="scenter">
            <span class="stop">
              {{key}}
            </span>
            <br>
            <span class="sbom">
              <span>VIP</span>
              <span class="st">试听</span>
              <span class="dj">独家</span>
              <span>SQ</span>
              <span class="name">{{geshou[item]}}</span>
            </span>
          </span>
          <span class="simg">
            <span class="simg1"><img src="../img/playgray.png" alt=""></span>
             <span class="simg2"><img src="../img/mr.png" alt=""></span>
          </span>
        </li>

      </ul>
    </div>
  </div>
  <div class="auchor" v-show="isShow">
    <audio ref="mplay"></audio>
    <div class="hehe">
       <span class="pic">
          <img :src=spic alt="">
    </span>

          <span class="s1">VIP</span>
          <span class="s2">{{mname}}</span>
          <span class="s3">{{pname}}</span>
          <span class="s4" @click="playings" ref="pl">

             <van-circle
               v-model="pic"
               :rate="100"
               :speed="1"
               color="#e15d5d"
               layer-color="#6e6e6e"
               class="circle"
               style="width: 100%;height:100%"
             />
  <img v-if="!pmu" src="../img/ac.png" alt="">
  <img v-else="pmu" src="../img/zanting.png" alt="">
          </span>

          <span class="s5" >
            <img src="../img/list.png" alt="">
          </span>
    </div>


  </div>
</div>
</template>

<script>
    export default {
        name: "music",
        data(){
          return{
            msg:'',
            yinyue:[],
            geshou:[],
            num:[],
            bgimg:'',
            pic:0,
            isShow:false,
            id:[],
            mname:'',
            pname:'',
            mpic:[],
            spic:'',
            url:'',
            pmu:false,
          }
        },
       methods:{
          idx(){
            this.msg=this.$route.query.msgKey;
            console.log(this.msg);
          },
          fn(){
            this.$http.get(`http://localhost:3000/top/list?idx=${this.msg}`)
              .then((res) => {
               // this.yinyue.push(res.data.playlist.tracks.name);
                console.log(res);
                this.bgimg=res.data.playlist.coverImgUrl;
                console.log(res.data.playlist.tracks[0].al.picUrl);
                try {
                  for(let i = 0; i <100; i ++){
                    this.yinyue.push(res.data.playlist.tracks[i].name);
                    this.geshou.push(res.data.playlist.tracks[i].ar[0].name);
                    this.num.push(i+1);
                    this.mpic.push(res.data.playlist.tracks[i].al.picUrl);
                    this.id.push(res.data.privileges[i].id);
                  }
                }catch (e) {
                  console.log(e)
                }


              });
            console.log(this.yinyue);
            console.log(this.geshou);
          },
          pla(item){
            // this.isShow=true;
            this.mname=this.yinyue[item];
            this.pname=this.geshou[item];
            this.spic=this.mpic[item];
            this.url=this.id[item];
            // this.pmu=false;
            // this.$http.get(`http://localhost:3000/song/url?id=${this.url}`)
            //   .then((res)=>{
            //     console.log(res.data.data[0].url);
            //     this.$refs.mplay.src=res.data.data[0].url;
            //   })
           console.log(this.url);
           this.$router.push({path:'/lyric',query:{name:this.yinyue,pname:this.geshou,spic:this.mpic,url:this.id,index:item}})
         },
          playings(){
          this.pmu=!this.pmu;
          if(this.pmu){
            try {
              this.$refs.mplay.play();
            }catch (e) {
              console.log(e)
            }

          }else {
            this.$refs.mplay.pause();
          }
    },
          backs(){
            console.log(1);
            this.$router.go(-1);
          }
       },
      mounted(){
          this.idx();
          this.fn();

      }
    }
</script>

<style lang="scss">
  *{
    margin: 0px;
    padding: 0px;
  }
  .mui{
    width: 1245px;
    .top{
      background-color: red;
      height: 950px;

      position: relative;
      .bg{
        width: 100%;
        height: 950px;
      }
        .title{
          width: 1245px;
          position: absolute;
         top: 140px;
          z-index: 999;
          .t{
            width: 100%;
            position: relative;
            span{
              display: inline-block;
              vertical-align: middle;
              img{
                width: 70px;
              }
            }
            .s1{
              position: absolute;
              left: 60px;
            }
            .s2{
              position: absolute;
              right: 180px;
            }
            .s3{
              position: absolute;
              right: 60px;
            }
          }

        }
      .bottom{
        position: absolute;
        bottom: 120px;
        width: 1245px;
        ul{
          width: 1245px;
          font-size: 0;
          li{
            list-style: none;
            display: inline-block;
            width: 25%;
            font-size: 35px;
            color: #877b7c;
            text-align: center;
            .icc{
              width: 70px;

            }
          }
        }
      }
    }
    .playmusic{

      position: relative;
      top: -60px;

      z-index: 999;
      padding-left: 45px;
      box-sizing: border-box;
      background-color: #f1f1f4;
      border-top-left-radius: 60px;
      border-top-right-radius: 60px;
      .playtitle{
        background-color: #f1f1f4;
        position: relative;
       padding-top: 20px;
        box-sizing: border-box;
        .ss{
          height: 130px;
          line-height: 130px;
          span{
            display: inline-block;
            vertical-align: middle;
            img{
              vertical-align: middle;
              width: 65px;
              margin-top: -15px;
            }
          }
          .s1{
            box-sizing: border-box;
            padding-left: 25px;
            vertical-align: middle;
          }
          .s2{
            font-size: 50px;
            color: #4c4c4d;
            vertical-align: middle;
            margin-left: 37px;
          }
          .s3{
            color: #999;
            font-size: 35px;
            vertical-align: middle;
          }
          .s4{
            position: absolute;
            right: 30px;
            vertical-align: middle;
            box-sizing: border-box;
            padding:0 40px;
            color: white;
            font-size: 35px;
            background-color: #fe3c3a;
            border-radius: 80px;
          }
        }

        ul{
          box-sizing: border-box;
          padding-top: 50px;

          li{
            list-style: none;
            position: relative;
            margin-bottom: 70px;
            span{
              vertical-align: middle;
              display: inline-block;
            }
            .sleft{
              text-align: center;
              color: red;
              .left1{
                font-size: 45px;
              }
              .left2{
                font-size: 30px;
                color: #ccc;
                .left2-1{
                  img{
                    width: 35px;
                    margin-top: -6px;
                  }
                }
              }

            }
            .scenter{
              box-sizing: border-box;
              margin-left: 10px;
              .stop{
                overflow: hidden;
                white-space: nowrap;
                width: 700px;
                text-overflow: ellipsis;
                font-size: 45px;
                color: black;

              }
              .sbom{
                span{
                  border: 3px solid #ff9872;
                  padding: 0 5px;
                  color: #ff9872 ;
                  font-size: 25px;
                  font-weight: bold;
                }
                .st,.dj{
                  border: 3px solid #d7686a;
                  color: #d7686a ;
                }
                .name{
                  border: none;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  width: 300px;
                  font-weight: unset;
                  color: #aeaeaf;
                  font-size: 35px;
                }
              }
            }
            .simg{
              .simg1{

                top: 40px;
                position: absolute;
                right: 180px;
                img{
                  width: 60px;
                }

              }
              .simg2{
                top: 40px;
                position: absolute;
                right: 70px;
                img{
                  width: 60px;
                }

              }
            }
          }

        }
      }
    }
    .auchor{
      width: 100%;
      height: 150px;
      bottom: 0;
      overflow: hidden;
      background-color: white;
      position: fixed;
      z-index: 1111;
      .hehe{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        .pic{
          margin-left: 20px;

          display: inline-block;

          width: 120px;
          height: 120px;
          margin-top: 15px;
          img{
            border-radius: 50%;
            width: 100%;
            height: 100%;
          }
        }
        .s1{
            top: 30px;
          margin-left: 15px;
          border: 1.5px solid #ff9872;
          padding: 0 5px;
          color: #ff9872 ;
          font-size: 25px;
          font-weight: bold;
            position: absolute;
            font-size: 25px;
          }
        .s2{
          display: inline-block;
          width: 700px;
          overflow: hidden;
          white-space: nowrap;
          position: absolute;
          top: 30px;
          margin-left: 105px;
          font-size: 35px;
          text-overflow: ellipsis;
        }
        .s3{
          display: inline-block;
          width: 700px;
          overflow: hidden;
          white-space: nowrap;
          position: absolute;
          bottom: 15px;
          margin-left: 15px;
          color: #919191;
          font-size: 35px;
          text-overflow: ellipsis;
        }
        .s4{
          margin-top: 25px;
          display: inline-block;
          position: absolute;
          right: 175px;
          width: 110px;
          height: 110px;
          /*background: url('../img/ac.png') 20px   no-repeat;*/
          /*background-position: center center;*/
          /*background-size: 80px;*/
          .circle{
            width: 100%;
            height: 100%;
            position: relative;
          }
          img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 80px;
          }
        }
        .s5{
          display: inline-block;
          position: absolute;
          width: 110px;
          height: 110px;
          right: 35px;
          margin-top: 25px;
          img{
            width: 110px;
            height: 110px;
            position: absolute;

          }
        }
        }


      }


  }

</style>
